/**
 * useEffect
 */
import React, { useState, useEffect } from 'react';
import { Button } from 'antd';

export default props => {
  const [count, setCount] = useState(0);

  // 相当于渲染后 以及更新生命周期  （第二个参数是条件数组只有数组中变量发生变化会执行）
  useEffect(() => {
    console.log('渲染后执行一次');
  }, []);

  // 初始化会执行 数组中变量发生变化会执行
  useEffect(() => {
    console.log('渲染后执行一次');
    console.log('数组中变量发生变化会执行');
    document.title = `点击了${count}次`;
  }, [count]);

  return (
    <div>
      eeeeeeeeeeeeeeeeeeee
      <div>{count}</div>
      <Button
        onClick={() => {
          setCount(count + 1);
        }}
      >
        add
      </Button>
      {/* <div>{useClock()}</div> */}
      <div>{useClock().toLocaleTimeString()}</div>
      我修改了啊
      <img src={require('@public/img/01.png')} />
    </div>
  );
};

// 自定义hook，命名要以use开头
function useClock(props) {
  const [data, setData] = useState(new Date());
  useEffect(() => {
    // 只需要在didMont执行就可以了
    const timer = setInterval(() => {
      setData(new Date());
    }, 1000);

    // 清除定时器  相当与willUnmount
    return () => {
      clearInterval(timer);
    };
  }, []);
  return data;
}
